<template>
	<view class="apption">
    <view class="topInfo">
      <image src="../../static/user/topInfo.jpg" class="topInfoBg"></image>
      <view class="info">
        <view class="namePic">
          <image src="../../static/user/logo.png" class="pic"></image>
          <view class="contText">
            <text class="name">李小米</text>
            <view class="grade"><image src="../../static/user/gradeImg4.png" class="gradeIco"></image>帝王总裁</view>
          </view>
        </view>
        <view class="userCode">
          <text class="codeFont">TS86105458</text>
          <view class="codeName">会员编码</view>
        </view>
      </view>
      <view class="userOption">
        <view class="list">
          <text class="number">6815</text>
          <view class="text">美豆</view>
        </view>
        <view class="list">
          <text class="number">20</text>
          <view class="text">今日美豆</view>
        </view>
        <view class="list">
          <text class="number">68789</text>
          <view class="text">消费总额</view>
        </view>
        <view class="list">
          <text class="number">8789</text>
          <view class="text">今日美钻</view>
        </view>
      </view>
    </view>
    <view class="myUser">
      <view class="title">我的服务</view>
      <view class="navList">
        <view class="list"><image src="../../static/user/nav1.png" class="navImage"></image><view>个人资料</view></view>
        <view class="list"><image src="../../static/user/nav2.png" class="navImage"></image><view>生日礼遇</view></view>
        <view class="list"><image src="../../static/user/nav3.png" class="navImage"></image><view>会员权益</view></view>
        <view class="list"><image src="../../static/user/nav4.png" class="navImage"></image><view>我的订单</view></view>
        <view class="list"><image src="../../static/user/nav5.png" class="navImage"></image><view>兑换记录</view></view>
        <view class="list"><image src="../../static/user/nav6.png" class="navImage"></image><view>专属客服</view></view>
      </view>
    </view>
    <view class="myUser">
      <view class="title">总裁战力值</view>
      <view class="fightingList">
        <view class="list"><image src="../../static/user/grade1.png" class="navImage"></image>
          <view>伯爵</view><view class="num">0015人</view></view>
        <view class="list"><image src="../../static/user/grade2.png" class="navImage"></image>
          <view>公爵</view><view class="num">0015人</view></view>
        <view class="list"><image src="../../static/user/grade3.png" class="navImage"></image>
          <view>王爵</view><view class="num">0015人</view></view>
        <view class="list"><image src="../../static/user/grade4.png" class="navImage"></image>
          <view>帝爵</view><view class="num">0015人</view></view>
      </view>
    </view>
	</view>
</template>

<script>
  import { getApi, postApi } from "@/api/index.js"
	export default {
		data() {
			return {
				title: 'Hello',
        queryData: '',
        classifyData: [],
        classifyDataValue: '',
        twoClassifyData: []
			}
		},
		onLoad() {
      uni.setNavigationBarTitle({
        title: '会员中心' // 设置为你想要显示的标题文本
      })
			this.init()
		},
    onShow() {
		},
		methods: {
      init(){
        let obj={
          pid: 0
        }
        this.loading = true
        postApi('/index/classify', obj).then(res => {
          if(res.code === 1){
            this.loading = false
            this.classifyData = res.data
            if(res.data.length > 0){
              if(this.queryData){
                this.classifyDataValue = this.queryData.id
              }else{
                this.classifyDataValue = res.data[0].id
              }
              this.twoInit()
            }
          }
        }).catch(err => {
          this.loading = false
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
.apption {
  position: relative;
  height: 100vh;
  overflow: auto;
  background: linear-gradient(to bottom, #B5DBDC, #95C7C5);
  .topInfoBg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 390rpx;
    z-index: 1;
  }
  .topInfo{
    position: relative;
    width: 100%;
    height: 390rpx;
    z-index: 2;
    // background-image: url('@/static/user/topInfo.jpg');
    // background-size: 100% 100%;
    .info{
      position: relative;
      z-index: 2;
      padding: 70rpx 48rpx 42rpx 48rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .namePic{
        height: 126rpx;
        display: flex;
        align-items: center;
        .pic{
          margin-right: 20rpx;
          width: 126rpx;
          height: 126rpx;
          border-radius: 50%;
        }
        .contText{
          .name{
            margin-bottom: 6rpx;
            line-height: 44rpx;
            font-weight: 400;
            font-size: 32rpx;
            color: #FFFFFF;
          }
          .grade{
            padding: 0 20rpx 0 10rpx;
            // min-width: 110rpx;
            height: 30rpx;
            background: #EED0F3;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-weight: bold;
            font-size: 12rpx;
            color: #000000;
            display: flex;
            align-items: center;
            .gradeIco{
              width: 40rpx;
              height: 24rpx;
            }
          }
        }
      }
      .userCode{
        color: #fff;
        font-size: 24rpx;
        line-height: 34rpx;
        .codeFont{
          font-size: 16rpx;
        }
      }
    }
    .userOption{
      padding: 0 64rpx;
      display: flex;
      position: relative;
      z-index: 2;
      .list{
        margin-right: 32rpx;
        width: 132rpx;
        height: 116rpx;
        background: rgba(207,180,167,0.19);
        border-radius: 14rpx 14rpx 14rpx 14rpx;
        font-weight: 400;
        font-size: 20rpx;
        color: #FFFFFF;
        text-align: center;
        padding-top: 18rpx;
        box-sizing: border-box;
        .number{
          font-weight: bold;
          font-size: 36rpx;
          line-height: 50rpx;
        }
        .text{
          opacity: .8;
        }
      }
      .list:last-child{
        margin-right: 0;
      }
    }
  }
  .myUser{
    min-height: 100rpx;
    margin: 40rpx 20rpx;
    background: #FEFEFE;
    box-shadow: 15rpx 5rpx 20rpx 2rpx rgba(159,159,159,0.35);
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    font-size: 24rpx;
    .title{
      position: relative;
      top: -8rpx;
      margin: 0 auto;
      width: 275rpx;
      height: 51rpx;
      line-height: 51rpx;
      text-align: center;
      background-image: url('@/static/user/myUser_title.png');
      background-size: 100% 100%;
      font-weight: bold;
      font-size: 24rpx;
      color: #000000;
    }
    .navList{
      padding-bottom: 40rpx;
      display: flex;
      flex-wrap: wrap;
      font-size: 16rpx;
      color: #0E7E76;
      .list{
        width:33.33%;
        padding: 40rpx 0 40rpx 0;
        text-align: center;
        .navImage{
          width: 56rpx;
          height: 56rpx;
        }
      }
    }
    .fightingList{
      padding-bottom: 40rpx;
      display: flex;
      flex-wrap: wrap;
      font-size: 16rpx;
      color: #0E7E76;
      .list{
        width:25%;
        padding: 40rpx 0 40rpx 0;
        text-align: center;
        .navImage{
          width: 90rpx;
          height: 67rpx;
        }
        .num{
          font-size: 20rpx;
        }
      }
    }
  }
}
</style>
